<template>
	<view class="refund">
		<navbar :showBack="true">申请退款</navbar>
		<view class="evaluate-con">
			<view class="goodsStyle acea-row row-between" v-for="(item,index) in cartInfo" :key="index">
				<view class="pic"><image :src="item.productInfo.image" mode=""></image></view>
				<view class="text acea-row row-between">
					<view class="name line2">{{item.productInfo.store_name}}</view>
					<view class="money">
						<view>￥{{item.productInfo.price}}</view>
						<view class="num">x{{item.cart_num}}</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item acea-row row-between-wrapper">
					<view>退货件数</view>
					<view class="num">1</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>退款金额</view>
					<view class="num">￥57.05</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>退款原因</view>
					<view class="picker acea-row row-between-wrapper" @click="showPicker">
						<view class="reason">{{range[idx]}}</view>
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
				<view class="item textarea acea-row row-between">
					<view>备注说明</view>
					<textarea @input="input" class="num" value="" placeholder="填写备注信息，100字以内" maxlength="100" />
				</view>
				<view class="item acea-row row-between">
					<view class="title acea-row row-between-wrapper">
						<view>上传凭证</view>
						<view class="tip">( 最多可上传3张 )</view>
					</view>
					<view class="upload acea-row row-middle">
						<view class="pic" v-for="(item,index) in pics" :key="index">
							<image :src="item" mode=""></image>
							<text class="iconfont icon-guanbi1 font-color" @click="delpics(index)"></text>
						</view>
						<view class="pic2 pic acea-row row-center-wrapper row-column" @click="uploadImg">
							<text class="iconfont icon-icon25201"></text>
							<view>上传凭证</view>
						</view>
					</view>
				</view>
			</view>
			<view class="returnBnt bg-color" @click="goRefund">申请退款</view>
		</view>
		<u-picker mode="selector" v-model="show" :range="range" @confirm="confirm"></u-picker>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				show:false,
				idx:0,
				range:[],
				pics:[],
				cartInfo:{},
				unique:"",
				comment:""
			}
		},
		onLoad(e) {
			this.unique = e.uni
			this.init(e.uni)
			this.orderRefundReason()
		},
		methods:{
			init:function(unique){
				const that = this;
				api.order.orderDetail(unique).then(e=>{
					if(e.status == 200){
						that.cartInfo = e.data.cartInfo
					}
				})
			},
			orderRefundReason:function(){
				const that = this;
				api.order.orderRefundReason().then(e=>{
					if(e.status == 200){
						that.range = e.data
					}
				})
			},
			goRefund:function(){
				let params = {};
				let refund_reason_wap_img = "";
				for(let i of this.pics){
					refund_reason_wap_img += i + ","
				}
				refund_reason_wap_img = refund_reason_wap_img.substring(0,refund_reason_wap_img.length-1)
				params.refund_reason_wap_img = refund_reason_wap_img;
				params.comment = this.comment;
				params.text = this.range[this.idx];
				params.uni = this.unique;
				api.order.orderRefundVerify(params).then(e=>{
					if(e.status == 200){
						uni.showToast({
							title:e.msg,
							icon:"success",
							duration:800
						})
						setTimeout(function(){
							uni.navigateBack({})
						},800)
					}else{
						uni.showToast({
							title:e.msg,
							icon:"none"
						})
					}
				})
				console.log("params",params)
			},
			showPicker:function(){
				this.show = true
			},
			confirm:function(e){
				console.log(e)
				this.idx = e[0]
			},
			uploadImg:function(){
				const that = this;
				let pics = this.pics;
				api.upload.uploadImg("pinglunImg",1).then(e=>{
					if(e.status == 200){
						if(that.pics.length<3){
							pics.push(e.data.url);
							that.pics = pics;
						}else{
							uni.showToast({
								title:"最多三张图片",
								icon:"none"
							})
						}
					}else{
						uni.showToast({
							title:e.msg,
							icon:"none"
						})
					}
				})
			},
			delpics:function(idx){
				let pics = this.pics;
				pics.splice(pics,1)
				this.pics = pics;
			},
			input:function(e){
				this.comment = e.detail.value;
			}
		}
	}
</script>

<style>
	.refund .evaluate-con .goodsStyle{
		margin-top: 1rpx;
		background-color: #fff;
		padding: 22rpx 30rpx;
	}
	.refund .evaluate-con .goodsStyle .pic{
		width: 120rpx;
		height: 120rpx;
	}
	.refund .evaluate-con .goodsStyle .pic image{
		border-radius: 6rpx;
	}
	.refund .evaluate-con .goodsStyle .text{
		width: 545rpx;
		font-size: 28rpx;
		color: #999;
	}
	.refund .evaluate-con .goodsStyle .text .name{
		width: 360rpx;
		color: #282828;
		height: 80rpx;
	}
	.refund .evaluate-con .goodsStyle .text .money{
		text-align: right;
	}
	.refund .evaluate-con .goodsStyle .text .money .num{
		margin-top: 7rpx;
	}
	.refund .evaluate-con .list{
		background-color: #fff;
		margin-top: 18rpx;
	}
	.refund .evaluate-con .list .item{
		margin-left: 30rpx;
		padding-right: 30rpx;
		min-height: 90rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		color: #333;
	}
	.refund .evaluate-con .list .item .num{
		color: #282828;
		width: 427rpx;
		text-align: right;
	}
	.refund .evaluate-con .list .item .picker{
		color: #282828;
		width: 427rpx;
		text-align: right;
	}
	.refund .evaluate-con .list .item .picker .reason{
		width: 385rpx;
	}
	.refund .evaluate-con .list .item .picker .iconfont{
		line-height: 100%;
	}
	.refund .evaluate-con .list .item.textarea{
		padding: 30rpx 30rpx 30rpx 0;
	}
	.refund .evaluate-con .list .item textarea{
		height: 100rpx;
		font-size: 30rpx;
	}
	.refund .evaluate-con .list .item .title{
		height: 95rpx;
		width: 100%;
	}
	.refund .evaluate-con .list .item .title .tip{
		font-size: 30rpx;
		color: #bbb;
	}
	.refund .evaluate-con .list .item .upload{
		padding-bottom: 36rpx;
	}
	.refund .evaluate-con .list .item .upload .pic2{
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}
	.refund .evaluate-con .list .item .upload .pic{
		margin: 35rpx 0 0 25rpx;
		width: 154rpx;
		height: 154rpx;
		position: relative;
		font-size: 24rpx;
		color: #bbb;
	}
	.refund .evaluate-con .list .item .upload .pic:first-of-type{
		margin: 35rpx 0 0 0;
	}
	.rate .evaluate-con .score .textarea .list .pic image{
		border-radius: 3rpx;
	}
	.refund .evaluate-con .list .item .upload .pic .icon-icon25201{
		color: #bfbfbf;
		font-size: 50rpx;
	}
	.refund .evaluate-con .list .item .upload .pic .icon-guanbi1{
		font-size: 45rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}
	.refund .evaluate-con .returnBnt{
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 43rpx auto;
	}
</style>
